<template>
	
	<div class="page-four">
	    <div class="title">产品质量状况分析</div>
	    <div class="content">
	    	<!-- left content -->
	    	<div class="left">
        		<div class="left-title" v-html="left_title"></div>
        		<div class="charts-div">
        			<div class="cd-left">
        				<div class="chart">
	        				<div class="moduleTit-box">
				              <div class="module-tit">
				                <img src="../assets/img/tit-point.png" alt="">
				                <span>驰名商标</span>
				                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
				              </div>
				            </div>
				            <div class="chart-one" id="chartOne"></div>
	        			</div>
	        			<div class="chart">
	        				<div class="moduleTit-box">
				              <div class="module-tit">
				                <img src="../assets/img/tit-point.png" alt="">
				                <span>地理标志产品</span>
				                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
				              </div>
				            </div>
				            <div class="chart-two" id="chartTwo"></div>
	        			</div>

	        			<div class="chart">
	        				<div class="moduleTit-box">
				              <div class="module-tit">
				                <img src="../assets/img/tit-point.png" alt="">
				                <span>绿色产品</span>
				                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
				              </div>
				            </div>
				            <div class="chart-three" id="chartThree"></div>
	        			</div>
        			</div>
        			<div class="cd-right">

        				<div class="chart">
							<div class="moduleTit-box">
				              <div class="module-tit">
				                <img src="../assets/img/tit-point.png" alt="">
				                <span>标题</span>
				                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
				              </div>
				            </div>
				            <div class="chart-four" id="chartFour"></div>
	        			</div>

						<div class="chart">
							<div class="moduleTit-box">
				              <div class="module-tit">
				                <img src="../assets/img/tit-point.png" alt="">
				                <span>标题</span>
				                <img class="rotateImg" src="../assets/img/tit-point.png" alt="">
				              </div>
				            </div>
				            <div class="chart-five" id="chartFive"></div>
	        			</div>

        			</div>
        		</div> 			
        	</div>	

			<!-- right content -->
			<div class="right">
				<div class="right-title" v-html="right_title"></div>
				<div class="charts-div">

					<div class="chart">
						<div class="moduleTit-box">
             	 			<div class="module-tit">
                				<img src="../assets/img/tit-point.png" alt="">
                					<span>标题</span>
                				<img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              				</div>
           				</div>
            			<div class="chart-six" id="chartSix"></div>
					</div>

					<div class="chart">
						<div class="moduleTit-box">
             	 			<div class="module-tit">
                				<img src="../assets/img/tit-point.png" alt="">
                					<span>标题</span>
                				<img class="rotateImg" src="../assets/img/tit-point.png" alt="">
              				</div>
           				</div>
            			<div class="chart-seven" id="chartSeven"></div>
					</div>

				</div>							
			</div>
        </div>
        
	</div>
    <!-- </div>	 -->

</template>
<script type="text/javascript">
	 import {
	    trademarkOption,
	    geographyOption,
	    greenOption,
		centerOneOption,
		centerTwoOption,
		eduOneOption,
		eduTwoOption
	  } from '../lib/js/thrScreen.js';

	export default{
		data(){
			return {
				left_title:"品牌建设",
				right_title:"质量教育",
				trademark:{
					numData: [30, 40, 50, 60, 70, 80, 100],
					typeData: [{
			            name: '家电',
			            value: 8,
			          }, {
			            name: '汽配',
			            value: 10,
			          }, {
			            name: '农资',
			            value: 30,
			          }, {
			            name: '能源',
			            value: 9,
			          }, {
			            name: '棉花',
			            value: 30,
			          }, {
			            name: '建材',
			            value: 30,
			          }, {
			            name: '玩具',
			            value: 30,
			          }, {
			            name: '计量',
			            value: 40,
			          },
			          {
			            name: '日用消费品',
			            value: 50,
			          }
			        ],
				},
				geography:{
					numData: [30, 40, 20, 60, 70, 80, 50],
					typeData: [{
			            name: '家电',
			            value: 8,
			          }, {
			            name: '汽配',
			            value: 10,
			          }, {
			            name: '农资',
			            value: 30,
			          }, {
			            name: '能源',
			            value: 9,
			          }, {
			            name: '棉花',
			            value: 30,
			          }, {
			            name: '建材',
			            value: 30,
			          }, {
			            name: '玩具',
			            value: 30,
			          }, {
			            name: '计量',
			            value: 40,
			          },
			          {
			            name: '日用消费品',
			            value: 50,
			          }
			        ],
				},
				green:{
					 numData: [10, 40, 30, 80, 70, 10, 50],
					 typeData: [{
			            name: '家电',
			            value: 8,
			          }, {
			            name: '汽配',
			            value: 10,
			          }, {
			            name: '农资',
			            value: 30,
			          }, {
			            name: '能源',
			            value: 9,
			          }, {
			            name: '棉花',
			            value: 30,
			          }, {
			            name: '建材',
			            value: 30,
			          }, {
			            name: '玩具',
			            value: 30,
			          }, {
			            name: '计量',
			            value: 40,
			          },
			          {
			            name: '日用消费品',
			            value: 50,
			          }
			        ]
				},
				centerOne:{
        			numData:[ 50, 70, 60, 100],
				},
				centerTwo:{
        			typeData: [{
			            name: '家电',
			            value: 8,
			          }, {
			            name: '汽配',
			            value: 10,
			          }, {
			            name: '农资',
			            value: 30,
			          }, {
			            name: '能源',
			            value: 9,
			          }, {
			            name: '棉花',
			            value: 30,
			          }, {
			            name: '建材',
			            value: 30,
			          }, {
			            name: '玩具',
			            value: 30,
			          }, {
			            name: '计量',
			            value: 40,
			          },
			          {
			            name: '日用消费品',
			            value: 50,
			          }
			        ]
				},
				eduOne: [30, 10, 30, 90],
				eduTwo: [
				  {
		            data: [20, 100, 60, 78, 10]
		          },
		          {
		            data: [40, 10, 60, 48, 20]
		          },
		          {
		            data: [30, 15, 37, 21, 90]
		          },
		          {
		            data: [20, 100, 60, 40, 10]
		          },
		          {
		            data: [20, 10, 60, 78, 10]
		          }
		        ],
		        standColor:['#59b2ef','#59b2ef','#59b2ef','#d87b7f'],
				inStitucolor: [{
		          type: 'linear',
		          x: 0,
		          y: 0,
		          x2: 1,
		          y2: 1,
		          colorStops: [{
		            offset: 0,
		            color: '#fa827e' // 0% 处的颜色
		          }, {
		            offset: 1,
		            color: '#f7cdcb' // 100% 处的颜色
		          }],
		        }, {
		          type: 'radial',
		          x: 0,
		          y: 0,
		          r: 1,
		          colorStops: [{
		            offset: 0,
		            color: '#36b33a' // 0% 处的颜色
		          }, {
		            offset: 1,
		            color: '#ade6f8' // 100% 处的颜色
		          }],
		        }, {
		          type: 'radial',
		          x: 0,
		          y: 0,
		          r: 1,
		          colorStops: [{
		            offset: 0,
		            color: '#76c999' // 0% 处的颜色
		          }, {
		            offset: 1,
		            color: '#bab6d3' // 100% 处的颜色
		          }],
		        }, {
		          type: 'radial',
		          x: 0,
		          y: 0,
		          r: 1,
		          colorStops: [{
		            offset: 0,
		            color: '#fddb7a' // 0% 处的颜色
		          }, {
		            offset: 1,
		            color: '#fef5d8' // 100% 处的颜色
		          }],
		    }],
			}
		},
		methods:{
			// 绘制图表
			createCanvas(option, id) {
		        let myChart = this.$echarts.init(document.getElementById(id))
		        myChart.clear();
		        option['animation'] = true;
		        option['animationDuration'] = 1000;
		        option['animationEasing'] = 'cubicOut'
		        myChart.setOption(option);
		    },
		    // 加载驰名商标
		    setTrademark(){
		    	console.log(trademarkOption);

		    	this.trademark.numData.forEach((item,index)=>{
		    		trademarkOption.series[0].data[index].value = item;
		    	})
		    	trademarkOption.series[2].data = [];
		    	let indexActive = 0;
			    this.trademark.typeData.forEach((item, index) => {
			    
			        indexActive = indexActive > 3?0:indexActive;
			        let js = {
			          name: item.name,
			          value: item.value,
			          itemStyle: {
			            color: ''
			          }
			        }
			        js['itemStyle']['color'] = this.inStitucolor[indexActive]
			        trademarkOption.series[2].data.push(js)
			        indexActive++;
			    });

		    	this.createCanvas(trademarkOption, 'chartOne')
		    },
		    // 加载地理标志产品
		    setGeography(){
		    	geographyOption.series[0].data = this.geography.numData
		    	geographyOption.series[2].data = [];
		    	let indexActive = 0;
			    this.geography.typeData.forEach((item, index) => {
			    
			        indexActive = indexActive > 3?0:indexActive;
			        let js = {
			          name: item.name,
			          value: item.value,
			          itemStyle: {
			            color: ''
			          }
			        }
			        js['itemStyle']['color'] = this.inStitucolor[indexActive]
			        geographyOption.series[2].data.push(js)
			        indexActive++;
			    });

		    	this.createCanvas(geographyOption, 'chartTwo');
		    },
		    // 加载绿色产品
		    setGreen(){
		    	this.green.numData.forEach((item,index)=>{
		    		greenOption.series[0].data[index].value = item;
		    	});
		    	let indexActive = 0;
		  
		    	greenOption.series[2].data = [];
		    	this.green.typeData.forEach((item, index) => {
			    
			        indexActive = indexActive > 3?0:indexActive;
			        let js = {
			          name: item.name,
			          value: item.value,
			          itemStyle: {
			            color: ''
			          }
			        }
			        js['itemStyle']['color'] = this.inStitucolor[indexActive]
			        greenOption.series[2].data.push(js)
			        indexActive++;
			    });

		    	this.createCanvas(greenOption, 'chartThree');
				},
				//加载中间第一图
				setCenterOne(){
					// centerOneOption
					// centerOneOption.series[0].data = [];
					this.centerOne.numData.forEach((item,index)=>{
						centerOneOption.series[0].data[index].value = item;
					})
					 this.createCanvas(centerOneOption, 'chartFour');
				},
				//加载中间第二图
				setCenterTwo(){
					console.log(centerTwoOption)
					// centerTwoOption.series[2].data = [];
					let indexActive = 0;
		  
					centerTwoOption.series[0].data = [];
					
			    	this.centerTwo.typeData.forEach((item, index) => {
				    
				        indexActive = indexActive > 3?0:indexActive;
				        let js = {
				          name: item.name,
				          value: item.value,
				          itemStyle: {
				            color: ''
				          }
				        }
				        js['itemStyle']['color'] = this.inStitucolor[indexActive]
				        centerTwoOption.series[0].data.push(js)
				        indexActive++;
				    });

			    	this.createCanvas(centerTwoOption, 'chartFive');
				},
				//加载素质教育第一图
				setEduOne(){

					this.eduOne.forEach((item, index) => {
			          eduOneOption.series[0].data[index].value = item;
			        });
			        // eduOneOption.series[0].data = this.eduOne;
			      	this.createCanvas(eduOneOption, 'chartSix');
				},
				//加载素质教育第二图
				setEduTwo(){
					let _this = this;
					this.eduTwo.forEach((item, index) => {
				        if (index > 3) return
				        eduTwoOption.series[index]['data'] = item.data;
				     });
				    this.createCanvas(eduTwoOption, 'chartSeven');	
				}
		},
		mounted(){
			// 加载驰名商标
			this.setTrademark();
			// 加载地理标志产品
			this.setGeography();
			// 加载绿色产品
			this.setGreen();
			//加载中间第一图
			this.setCenterOne();	
			//加载中间第二图
			this.setCenterTwo();	
			//加载素质教育第一图
			this.setEduOne();
			//加载素质教育第二图
			this.setEduTwo();
			 
		}
	}


</script>

<style scoped lang="scss">
	 @import "../lib/css/until";
	  .page-four {
	    color: $wordColor;
	    height: 100%;
	    width: 100%;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
	    padding: 193px 200px 193px;
	    left: 0;
	    top: 0;
	    position: absolute;
	    z-index: 10;
	    .title {
	      height: $oneTitH;
	      line-height: $oneTitH;
	      width: $oneTitW;
	      margin: 0 auto 50px;
	      color: $wordColor;
	      font-size: 140px;
	      text-align: center;
	      background: url("../assets/img/title.png") no-repeat;
	    }
	    .content {
	      display: flex;
	      .left{
	      	width: 5162px;
	        height: 2742px;
	        background: url("../assets/img/thr-left.png") no-repeat;
	        margin-right: 104px;
	        .left-title {
	          margin-top: 39px;
	          margin-left: 2452px;
	          text-align: center;
	          width: 583px;
	          height: 153px;
	          font-size: 72px;
	          line-height: 153px;
	        }
	        .charts-div{
	        	margin-top: 112px;
	        	display:flex;
	        	.cd-left{
	        		width:3196px;
	        		margin-left:100px;
	        		.chart{
	          			width:3196px;
	          			height:768px;
	          			@include linerBg();
	          			.moduleTit-box {
			              font-size: 70px;
			              padding-top: 63px;
			              .module-tit {
			                display: flex;
			                justify-content: center;
			                span{
			                	padding:0 100px;
			                }
			              }
			            }
	          		}
	          		.chart-one {
		              width: 100%;
		              height: 500px; // @include linerBg();
		            }
		            .chart-two {
		              width: 100%;
		              height: 500px; // @include linerBg();
		            }
		            .chart-three {
		              width: 100%;
		              height: 500px; // @include linerBg();
		            }
	        	}
	        	.cd-right{
	        		width:1590px;
	        		margin-left:138px;
	        		height:2742px;
	          		@include linerBg();
	        		.chart{
	        			padding-top:120px;
	        			width:1590px;
	          			height: 1000px;	
	        		}
					.chart-four {
						width: 1370px;
						height: 600px; // @include linerBg();
						margin:0 auto;
					}
					.chart-five {
						width: 1370px;
						height: 600px; // @include linerBg();
						margin:0 auto;

					}
	        	}
	        }
	      }
	      .right{
	      	width: 1771px;
	        height: 2735px;
	        background: url("../assets/img/thr-right.png") no-repeat;
	        .right-title {
	          margin-top: 39px;
	          margin-left: 583px;
	          text-align: center;
	          width: 583px;
	          height: 153px;
	          font-size: 72px;
	          line-height: 153px;
	        }
	        .charts-div{
	        	
	        	margin:112px auto 0;
	        	width:1590px;
	        	height:2264px;
	        	.chart{
	        		width:1590px;
	        		height:935px;
	        		padding-top:200px;
	          		@include linerBg();
	        	}
	        	.chart-six{
	        		width: 1383px;
					height: 600px; 
	        		margin:10px auto 0;
	        	}
	        	.chart-seven{
	        		width:1383px;
					height: 692px; 
	        		margin:10px auto 0;

	        	}
	        }

	      }
	  	}
	  }


</style>